<template>
    <div class="camera-container">
    <video ref="video" class="camera-preview"></video>
    <canvas ref="canvas" class="camera-capture"></canvas>
    <div class="guide-line"></div>
    <div class="camera-button" @click="takePhoto">拍照</div>
  </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        constraints: { video: { facingMode: "environment" } },
        isCapturing: false
      };
    },
    mounted() {
      this.startCamera();
    },
    methods: {
      startCamera() {
        navigator.mediaDevices.getUserMedia(this.constraints)
          .then(stream => {
            this.$refs.video.srcObject = stream;
            this.$refs.video.play();
          })
          .catch(error => console.log(error));
      },
      takePhoto() {
        if (this.isCapturing) return;
        this.isCapturing = true;
        const canvas = this.$refs.canvas;
        const video = this.$refs.video;
        const capture = this.$refs.capture;
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
        // capture.captureStream = capture.captureStream || capture.mozCaptureStream;
        // capture.captureStream().getTracks().forEach(track => track.stop());
        this.$refs.video.srcObject = null;
        this.isCapturing = false;
        const base64 = canvas.toDataURL("image/jpeg");
        console.log(base64);
        this.$refs.video.style.display = "none";
        this.$refs.canvas.style.display = "block";
        this.$refs.canvas.style.transform = "scale(-1, 1)";
      }
    }
  };
  </script>
  
  <style scoped>
  .camera-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000000;
}

.camera-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-capture {
  display: none;
}

.guide-line {
  position: absolute;
  width: 70%;
  height: calc(70% / 1.58);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff;
}

.camera-guideline-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}

.camera-guideline-corner:nth-of-type(1) {
  top: calc(50% - 12px);
  left: calc(50% - 12px);
}

.camera-guideline-corner:nth-of-type(2) {
  top: 10%;
  right: 10%;
}

.camera-guideline-corner:nth-of-type(3) {
  bottom: 10%;
  right: 10%;
}

.camera-guideline-corner:nth-of-type(4) {
  bottom: 10%;
  left: 10%;
}

.camera-button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border: 2px solid #ffffff;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}
.camera-capture-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>